<template>
	<h3>写邮件</h3>
	<el-divider />
	
	<!-- 收信人 -->
	<el-row>
	    <el-col :span="4">收件人：</el-col>
	    <el-col :span="20" style="text-align: left">
			<el-select v-model="send.recipient" class="m-2" placeholder="选择收信人" size="large">
			    <el-option
			      v-for="c in contacter" 
				  :key="c.email"
				  :label="c.name"
				  :value="c.email"
			    >
				<span style="float: left">{{ c.name }}</span>
				      <span
				        style="
				          float: right;
				          color: var(--el-text-color-secondary);
				          font-size: 13px;
				        "
				        >{{ c.email }}</span
				      >
				</el-option>
			  </el-select>
		</el-col>
	  </el-row>
	  
	  
	  <!-- 邮件主题 -->
	  <el-row>
	      <el-col :span="4">主题：</el-col>
	      <el-col :span="20" style="text-align: left">
	  		<el-input
	  		    v-model="send.title"
	  		    maxlength="50"
				placeholder="请输入您的主题"
	  		    show-word-limit
	  		    type="text"
	  		  />
	  	</el-col>
	    </el-row>
		
		<el-row>
			<el-col :span="4">添加附件：</el-col>
			<el-col :span="20" style="text-align: left">
				<el-upload
				ref="uploadRef"
				class="upload-demo"
				action="http://localhost:8080/write/upload"
				:auto-upload="true"
				:on-success="successUpload"
				>
				<el-button type="primary">选择文件</el-button>
				</el-upload>
			</el-col>
		</el-row>
		
		<!-- 邮件正文 -->
		<el-row>
		    <el-col :span="4">正文：</el-col>
		    <el-col :span="20" style="text-align: left">
				<el-input
				    v-model="send.main"
				    :autosize="{ minRows: 10, maxRows: 100 }"
				    type="textarea"
				  />
			</el-col>
		  </el-row>
		
		
		<el-row>
		    <el-col :span="4"></el-col>
		    <el-col :span="20" style="text-align: left">
				<el-button @click="sendSuccess">发送</el-button>
				<el-button @click="saveDraft">存草稿</el-button>
			</el-col>
		  </el-row>
		
	  
</template>

<script>
	import { ElMessage } from 'element-plus'
	import qs from 'qs'
	export default {
		data(){
			return{
				email:[],
				contacter:[],
				send:{},
			}
		},
		methods:{
			sendSuccess(){
				if(this.send.recipient==null||this.send.recipient=="")
				{
					ElMessage.error('请选择收信人！')
				}
				else if(this.send.title==null||this.send.title=="")
				{
					ElMessage.error('请添写邮件主题！')
				}
				else{
				let that=this
				let str=qs.stringify(that.send)
				this.$axios.get("http://localhost:8080/write/insert?"+str).then(function(res){
					if(res.data==true)
					{
						ElMessage({
						    message: '发送成功！',
						    type: 'success',
						  })
						  
					}
					else{
						ElMessage.error('发送失败！')
					}
					})
					}
			},
			successUpload(){
				
			},
			saveDraft(){
				if(this.send.recipient==null||this.send.recipient=="")
				{
					ElMessage.error('请选择收信人！')
				}
				else if(this.send.title==null||this.send.title=="")
				{
					ElMessage.error('请添写邮件主题！')
				}
				else{
				let that=this
				let str=qs.stringify(that.send)
				this.$axios.get("http://localhost:8080/draft/insert?"+str).then(function(res){
					if(res.data==true)
					{
						ElMessage({
						    message: '保存成功！请在草稿箱中查看',
						    type: 'success',
						  })
						  
					}
					else{
						ElMessage.error('保存失败！')
					}
					})
					}
				
				
			}
			
		},
		created(){
			let that=this
			this.$axios.get("http://localhost:8080/write/contact").then(function(res){
					that.contacter=res.data
				})
			
		}
	}
	
	
</script>

<style>
	.el-input {
		margin-top: 10px;
	}
	h3 {
		text-align: left;
		margin-top:0px;
		
	}
	.el-col {
		text-align: right;
		line-height: 50px;
	}
</style>
